Here’s a **comprehensive parallax script** (`main.js`) and corresponding **CSS styles** (`main.css`). This setup allows you to apply **parallax effects** to various elements like images, text, sections, and menus.
---
## **1️⃣ JavaScript File: `main.js`**
Save this as **`main.js`** and include it in your HTML file.
```js
document.addEventListener("DOMContentLoaded", function () {
function parallaxEffect() {
let scrollPos = window.scrollY;
document.querySelectorAll("[data-parallax]").forEach((element) => {
let speed = parseFloat(element.dataset.speed) || 0.3;
let direction = element.dataset.direction || "vertical"; // Default direction: vertical
if (direction === "vertical") {
element.style.transform = `translateY(${scrollPos * speed}px)`;
} else if (direction === "horizontal") {
element.style.transform = `translateX(${scrollPos * speed}px)`;
} else if (direction === "fade") {
element.style.opacity = 1 - scrollPos * speed * 0.01;
}
});
}
window.addEventListener("scroll", parallaxEffect);
parallaxEffect(); // Run once on load
});
```
✅ **Supports:**
- **Vertical movement** → `data-direction="vertical"`
- **Horizontal movement** → `data-direction="horizontal"`
- **Fading effect** → `data-direction="fade"`
---
## **2️⃣ CSS File: `main.css`**
Save this as **`main.css`** and link it to your HTML file.
```css
[data-parallax] {
transition: transform 0.2s ease-out, opacity 0.3s ease-out;
will-change: transform, opacity;
}
```
---
## **3️⃣ How to Use It in HTML**
Simply add `data-parallax` to elements and set `data-speed` for effect intensity.
### **Parallax on Images**
```html
```
✅ **Effect:** Moves **slower** than the scroll.
---
### **Parallax on Sections**
```html
Parallax Section
```
✅ **Effect:** The whole section moves **smoothly while scrolling**.
---
### **Parallax on Menu (Floating Effect)**
```html
```
✅ **Effect:** The menu moves slightly **as you scroll**.
---
### **Parallax on Text**
```html
Smooth Parallax Text
```
✅ **Effect:** The text moves **sideways** on scroll.
---
### **Parallax Fade Effect**
```html
This text will fade as you scroll.
```
✅ **Effect:** The text **gradually disappears** on scroll.
---
### **Final Steps to Use It**
1️⃣ Save **`main.js`** and **`main.css`** in your project.
2️⃣ Link them in your **HTML file**:
```html
```
3️⃣ Add **`data-parallax`** to elements you want to animate.
🚀 **Done! Now your website has a smooth parallax effect!**
```
✅ **Effect:** Moves **slower** than the scroll.
---
### **Parallax on Sections**
```html